<div class="m-player"
  [@showHide]="showPlayer"
  appClickoutside
  [bindFlag]='bindFlag'
  (onClickOutSide)='onClickOutSide($event)'
  (mouseenter)="togglePlayer('show')"
  (mouseleave)="togglePlayer('hide')"
  (@showHide.start)='animating = true'
  (@showHide.done)='onAnimateDone($event)'
>
    <div class="lock" (click)="isLocked = !isLocked">
        <div class="left"><i [class.locked]='isLocked'></i></div>
    </div>
    <div class="hand"></div>
    <div class="container">
        <div class="wrap">
            <div class="btns">
                <i class="prev" (click)="onPrev(currentIndex - 1)"></i>
                <i class="toggle" [class.playing]='playing' (click)="onToggle()"></i>
                <i class="next"  (click)="onNext(currentIndex + 1)"></i>
            </div>
            <div class="head">
                <img [src]="picUrl" alt="" srcset="">
                <i class="mask" (click)="toInfo(['/songInfo',currentSong.id])"></i>
            </div>
            <div class="play">
                <div class="words clearfix" >
                    <p class="ellipsis margin-bottom-none"  (click)="toInfo(['/songInfo', currentSong.id])">{{currentSong?.name}}</p>
                    <ul class="songs clearfix margin-bottom-none">
                        <li *ngFor="let item of currentSong?.ar; last as isLast">
                            <a (click)="toInfo(['/singer', item.id])">{{item.name}}</a>
                            <span [hidden]='isLast'>/</span>
                        </li>
                    </ul>
                </div>
                <div class="bar">
                    <div class="slider-wrap">
                        <app-wy-slider [bufferOffset]="bufferPercent" [(ngModel)]="percent" (wyOnAfterChange)="onPercentChange($event)"></app-wy-slider>
                    </div>
                    <span class="itme">
                        <em>{{currentTime | formatTime}}</em>/{{duration | formatTime}}
                    </span>
                </div>
            </div>
            <div class="oper">
                <i class="like" title="收藏"></i>
                <i class="share" title="分享"></i>
            </div>
            <div class="ctrl">
                <i class="volume" title="音量" (click)="toggleVolPanel()"></i>
                <i [ngClass]='currentMode.type' [title]="currentMode.laber" (click)="changeMode()"></i>
                <p class="open" #NzTooltipDirective [nzTooltipVisible]="controlTooltip.show" [nzTooltipTitle]="controlTooltip.title" nzTooltipPlacement="topCenter" nz-tooltip nzTooltipOverlayClassName="tip-bg" (click)="toggleListPanel()">
                    <span></span>
                </p>
                <div class="control-vol" [hidden]='!showVolumnPanel'>
                    <app-wy-slider [wyVertical]="true" [(ngModel)]="volume" (ngModelChange)="onVolumeChange($event)"></app-wy-slider>
                </div>
            </div>
            <app-wy-player-panel
              [playing]='playing'
              [songList]="songList"
              [currentSong]="currentSong"
              [show]="showPanel"
              (onChangeSong)="onChangeSong($event)"
              (onClose)="showPanel = false;showVolumnPanel = false"
              (onDeletSong)='onDeletSong($event)'
              (onClearSong)='onClearSong()'
              (onToInfo)='toInfo($event)'

            ></app-wy-player-panel>
        </div>
    </div>
    <audio
      #audio
      [src]="currentSong?.url"
      (canplay)="onCanplay()"
      (timeupdate)="onTimeUpdate($event)"
      (ended)="onEnded()"
      (error)="onError()"
    >
    </audio>
</div>
